<template>
  <div class="common-buttom">
    <ul>
      <li :class="{'active': currentIndex === 0}">
        首页
        <i class="iconfont icon-shouye"></i>
      </li>
      <li :class="{'active': currentIndex === 1}">
        分类
        <i class="iconfont icon-fenlei1"></i>
      </li>
      <li :class="{'active': currentIndex === 2}">
        购物车
        <i class="iconfont icon-03f"></i>
      </li>
      <li :class="{'active': currentIndex === 3}">
        我的
        <i class="iconfont icon-wode"></i>
      </li>
    </ul>
  </div>
</template>
<style scoped>
.common-buttom {
  width: 10rem;
  height: 1.1rem;
  background-color: rgba(255, 255, 255, 0.9);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;

  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid;

    li {
      width: 2.5rem;
      height: 1.1rem;
      font-size: 0.3rem;
      color: grey;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
.active {
  color: #FF6040;
}
</style>
